<template>
  <div class="wrapper">
    <div class="box" @click="close(false)">
      <swiper :options="swiperOption">
        <swiper-slide class="slide_a">
          <img src="http://img1.qunarzz.com/sight/p0/1408/21/da8b373aeaa10fdda27a33ef62356702.jpg_r_800x800_a0b1bd91.jpg">
        </swiper-slide>
        <swiper-slide class="slide_a">
          <img src="http://img1.qunarzz.com/sight/p0/1408/21/4ac1b5e700d2846840d100fc626e36fa.jpg_r_800x800_5b35a158.jpg">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Gallary',
    data () {
      return {
        swiperOption :{
          pagination : '.swiper-pagination',
          paginationType : 'fraction',
          observeParents:true,
          observer:true
        }
      }
    },
    methods : {
      close (res) {
        //向父级触发事件
        this.$emit('change',res);
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-container{
    overflow inherit;
  }
  .wrapper >>> .swiper-pagination-fraction{
                 color:white;
                 bottom:-.3rem;
                 z-index:200;
               }
  .wrapper{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#000;
    display :flex;
    flex-direction:column;
    justify-content :center;
    z-index:99;
    .box{
      width:100%;
      height:0;
      padding-bottom :100%;
      img{
        width:100%;
      }
    }
  }
</style>
